<template>
    <div id="sets">
        <el-tabs tab-position="left" style="height: 100%;">
            <el-tab-pane :label="$t('语言')" style="padding: 20px">


                <el-radio-group v-model="language" @input="changeLang">
                    <el-radio label="zh-CN">简体中文</el-radio>
                    <el-radio label="en">English</el-radio>
                </el-radio-group>

            </el-tab-pane>
            <el-tab-pane :label="$t('快捷键')"  style="padding: 20px">

                <el-form  label-width="120px">
                    <el-form-item :label="$t('结账')">
                        <el-select v-model="key1" :placeholder="$t('使用打印机')">
                            <el-option  label="F1" value="F1"></el-option>
                            <el-option  label="F2" value="F2"></el-option>
                            <el-option  label="F3" value="F3"></el-option>
                            <el-option  label="F4" value="F4"></el-option>
                            <el-option  label="F5" value="F5"></el-option>
                            <el-option  label="F6" value="F6"></el-option>
                            <el-option  label="F7" value="F7"></el-option>
                            <el-option  label="F8" value="F8"></el-option>
                            <el-option  label="F9" value="F9"></el-option>
                            <el-option  label="F10" value="F10"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('快捷查询')">
                        <el-select v-model="key2" :placeholder="$t('快捷查询')">
                            <el-option  label="F1" value="F1"></el-option>
                            <el-option  label="F2" value="F2"></el-option>
                            <el-option  label="F3" value="F3"></el-option>
                            <el-option  label="F4" value="F4"></el-option>
                            <el-option  label="F5" value="F5"></el-option>
                            <el-option  label="F6" value="F6"></el-option>
                            <el-option  label="F7" value="F7"></el-option>
                            <el-option  label="F8" value="F8"></el-option>
                            <el-option  label="F9" value="F9"></el-option>
                            <el-option  label="F10" value="F10"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('商品搜索模式')">
                        <el-select v-model="key3" :placeholder="$t('快捷查询')">
                            <el-option  label="F1" value="F1"></el-option>
                            <el-option  label="F2" value="F2"></el-option>
                            <el-option  label="F3" value="F3"></el-option>
                            <el-option  label="F4" value="F4"></el-option>
                            <el-option  label="F5" value="F5"></el-option>
                            <el-option  label="F6" value="F6"></el-option>
                            <el-option  label="F7" value="F7"></el-option>
                            <el-option  label="F8" value="F8"></el-option>
                            <el-option  label="F9" value="F9"></el-option>
                            <el-option  label="F10" value="F10"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('光标回到扫码框')">
                        <el-select v-model="key4" :placeholder="$t('快捷查询')">
                            <el-option  label="F1" value="F1"></el-option>
                            <el-option  label="F2" value="F2"></el-option>
                            <el-option  label="F3" value="F3"></el-option>
                            <el-option  label="F4" value="F4"></el-option>
                            <el-option  label="F5" value="F5"></el-option>
                            <el-option  label="F6" value="F6"></el-option>
                            <el-option  label="F7" value="F7"></el-option>
                            <el-option  label="F8" value="F8"></el-option>
                            <el-option  label="F9" value="F9"></el-option>
                            <el-option  label="F10" value="F10"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

            </el-tab-pane>

            <el-tab-pane :label="$t('打印')"  style="padding: 20px">
                <el-form ref="form" label-width="80px">
                    <el-form-item :label="$t('使用打印机')">
                        <el-select v-model="printer" :placeholder="$t('使用打印机')">
                            <el-option  v-for="(item,index) in printerList" :key="item.name" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import {ipcRenderer} from "electron";

export default {
    name: "sets",
    data(){
        return {
            language:"",
            printerList:[],
            printer:"",
            key1:"",
            key2:"",
            key3:"",
            key4:"",

        }
    },
    watch:{
        key1(val){
            localStorage.key1 = val;
        },
        key2(val){
            localStorage.key2 = val;
        },
        key3(val){
            localStorage.key3 = val;
        },
        key4(val){
            localStorage.key4 = val;
        },
        printer(val){
            localStorage.printer = val;
        }
    },
    methods:{
        changeLang(value){
            localStorage.language = value;
            this.$i18n.locale = value;
        }
    },
    mounted() {
        this.language = localStorage.language;

        this.printer = localStorage.printer;
        if (localStorage.key1){
            this.key1 = localStorage.key1;
        }
        if (localStorage.key2){
            this.key2 = localStorage.key2;
        }
        if (localStorage.key3){
            this.key3 = localStorage.key3;
        }
        if (localStorage.key4){
            this.key4 = localStorage.key4;
        }



        // ipcRenderer.send('getPrinterList')
        ipcRenderer.invoke("getPrinterList").then(res => {
            this.printerList = res;
        })



        // ipcRenderer.once('getPrinterList', (event, data) => {
        //     console.log(event,data);
        //     // 过滤可用打印机
        //     this.printList = data.filter(element => element.status === 0)
        //     // 1.判断是否有打印服务
        //     if (this.printList.length <= 0) {
        //         Message.info('打印服务异常,请尝试重启电脑')
        //         this.$emit('cancel')
        //     } else {
        //         this.dialogVisible = true
        //         //  this.checkPrinter()
        //     }
        // })


    }
}
</script>

<style scoped lang="scss">
    #sets{
        height: 100%;padding: 10px;
    }
</style>
